<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
  <div class="min-h-screen bg-gray-50">
    <main class="p-6">
      <div class="grid grid-cols-3 gap-6">
        <!-- 用户总数 -->
        <div
          class="bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow cursor-pointer"
          @click="handleCardClick('users')"
        >
          <div class="flex items-start justify-between">
            <div>
              <div class="text-blue-500 mb-4">
                <UserOutlined style="font-size: 24px" />
              </div>
              <div class="text-3xl font-semibold mb-2">{{ userTotal }}</div>
              <div class="text-gray-500">总用户数</div>
            </div>
            <div ref="userChart" class="w-24 h-16"></div>
          </div>
        </div>
        <!-- 用户增长 -->
        <div
          class="bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow cursor-pointer"
          @click="handleCardClick('growth')"
        >
          <div class="flex items-start justify-between">
            <div>
              <div class="text-green-500 mb-4">
                <RiseOutlined style="font-size: 24px" />
              </div>
              <div class="text-3xl font-semibold mb-2">{{ userGrowth }}</div>
              <div class="text-gray-500">最近增长</div>
            </div>
            <div ref="growthChart" class="w-24 h-16"></div>
          </div>
        </div>
        <!-- 题目总数 -->
        <div
          class="bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow cursor-pointer"
          @click="handleCardClick('problems')"
        >
          <div class="flex items-start justify-between">
            <div>
              <div class="text-purple-500 mb-4">
                <FileTextOutlined style="font-size: 24px" />
              </div>
              <div class="text-3xl font-semibold mb-2">{{ problemTotal }}</div>
              <div class="text-gray-500">题目总数</div>
            </div>
            <div ref="problemChart" class="w-24 h-16"></div>
          </div>
        </div>
        <!-- 提交总数 -->
        <div
          class="bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow cursor-pointer"
          @click="handleCardClick('submissions')"
        >
          <div class="flex items-start justify-between">
            <div>
              <div class="text-orange-500 mb-4">
                <SendOutlined style="font-size: 24px" />
              </div>
              <div class="text-3xl font-semibold mb-2">
                {{ submissionTotal }}
              </div>
              <div class="text-gray-500">累计提交</div>
            </div>
            <div ref="submissionChart" class="w-24 h-16"></div>
          </div>
        </div>
        <!-- 通过总数 -->
        <div
          class="bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow cursor-pointer"
          @click="handleCardClick('accepted')"
        >
          <div class="flex items-start justify-between">
            <div>
              <div class="text-cyan-500 mb-4">
                <CheckCircleOutlined style="font-size: 24px" />
              </div>
              <div class="text-3xl font-semibold mb-2">{{ acceptedTotal }}</div>
              <div class="text-gray-500">通过总数 ({{ passRate }}%)</div>
            </div>
            <div ref="acceptedChart" class="w-24 h-16"></div>
          </div>
        </div>
        <!-- 反馈总数 -->
        <div
          class="bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow cursor-pointer"
          @click="handleCardClick('feedback')"
        >
          <div class="flex items-start justify-between">
            <div>
              <div class="text-red-500 mb-4">
                <MessageOutlined style="font-size: 24px" />
              </div>
              <div class="text-3xl font-semibold mb-2">{{ feedbackTotal }}</div>
              <div class="text-gray-500">待处理反馈</div>
            </div>
            <div ref="feedbackChart" class="w-24 h-16"></div>
          </div>
        </div>
      </div>
    </main>

    <!-- 图表区域 -->
    <div class="px-6 pb-6">
      <div class="grid grid-cols-2 gap-6">
        <!-- 提交趋势图 -->
        <div class="bg-white p-6 rounded-lg shadow-sm">
          <h3 class="text-lg font-medium mb-4">提交趋势</h3>
          <div ref="submissionTrendChart" class="w-full h-80"></div>
        </div>

        <!-- 题目类型分布 -->
        <div class="bg-white p-6 rounded-lg shadow-sm">
          <h3 class="text-lg font-medium mb-4">题目类型分布</h3>
          <div ref="problemTypeChart" class="w-full h-80"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import {
  UserOutlined,
  RiseOutlined,
  FileTextOutlined,
  SendOutlined,
  CheckCircleOutlined,
  MessageOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import type { EChartsOption } from "echarts";
const userTotal = ref(4);
const userGrowth = ref(0);
const problemTotal = ref(4);
const submissionTotal = ref(15);
const acceptedTotal = ref(3);
const feedbackTotal = ref(2);
const passRate = ref(51.3);
const userChart = ref<HTMLElement | null>(null);
const growthChart = ref<HTMLElement | null>(null);
const problemChart = ref<HTMLElement | null>(null);
const submissionChart = ref<HTMLElement | null>(null);
const acceptedChart = ref<HTMLElement | null>(null);
const feedbackChart = ref<HTMLElement | null>(null);
const createMiniChart = (el: HTMLElement, color: string, data: number[]) => {
  const chart = echarts.init(el);
  const option = {
    animation: false,
    grid: {
      left: 0,
      right: 0,
      top: 0,
      bottom: 0,
    },
    xAxis: {
      type: "category",
      show: false,
    },
    yAxis: {
      type: "value",
      show: false,
    },
    series: [
      {
        data: data,
        type: "line",
        smooth: true,
        symbol: "none",
        lineStyle: {
          color: color,
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: color,
              },
              {
                offset: 1,
                color: "rgba(255,255,255,0)",
              },
            ],
          },
        },
      },
    ],
  };
  chart.setOption(option);
};
const handleCardClick = (type: string) => {
  const typeMap = {
    users: "用户管理",
    growth: "增长分析",
    problems: "题目管理",
    submissions: "提交记录",
    accepted: "通过统计",
    feedback: "反馈管理",
  };
  message.info(`跳转到${typeMap[type as keyof typeof typeMap]}页面`);
};
const submissionTrendChart = ref<HTMLElement | null>(null);
const problemTypeChart = ref<HTMLElement | null>(null);

onMounted(() => {
  createMiniChart(userChart.value!, "#1890FF", [30, 40, 20, 50, 40, 60, 50]);
  createMiniChart(growthChart.value!, "#52C41A", [20, 30, 40, 50, 60, 70, 80]);
  createMiniChart(problemChart.value!, "#722ED1", [40, 35, 45, 50, 45, 55, 50]);
  createMiniChart(
    submissionChart.value!,
    "#FA8C16",
    [60, 50, 70, 60, 75, 65, 80]
  );
  createMiniChart(
    acceptedChart.value!,
    "#13C2C2",
    [30, 40, 35, 45, 40, 50, 45]
  );
  createMiniChart(
    feedbackChart.value!,
    "#F5222D",
    [20, 25, 15, 30, 25, 35, 30]
  );

  // 提交趋势图
  if (submissionTrendChart.value) {
    const trendChart = echarts.init(submissionTrendChart.value);
    const trendOption: EChartsOption = {
      animation: false,
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["提交次数", "通过次数"],
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: "提交次数",
          type: "line",
          smooth: true,
          data: [1200, 1320, 1500, 1800, 2200, 2500, 2800],
          itemStyle: {
            color: "#1890FF",
          },
        },
        {
          name: "通过次数",
          type: "line",
          smooth: true,
          data: [600, 680, 780, 950, 1200, 1400, 1600],
          itemStyle: {
            color: "#52C41A",
          },
        },
      ],
    };
    trendChart.setOption(trendOption);
  }

  // 题目类型分布图
  if (problemTypeChart.value) {
    const typeChart = echarts.init(problemTypeChart.value);
    const typeOption: EChartsOption = {
      animation: false,
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: {
        type: "value",
      },
      yAxis: {
        type: "category",
        data: [
          "动态规划",
          "贪心算法",
          "深度搜索",
          "广度搜索",
          "二分查找",
          "数组",
          "字符串",
          "链表",
          "树",
        ],
      },
      series: [
        {
          name: "题目数量",
          type: "bar",
          data: [320, 280, 250, 220, 200, 180, 160, 140, 120],
          itemStyle: {
            color: function (params: any) {
              const colors = [
                "#1890FF",
                "#52C41A",
                "#722ED1",
                "#FA8C16",
                "#13C2C2",
                "#F5222D",
                "#EB2F96",
                "#FFB020",
                "#A0D911",
              ];
              return colors[params.dataIndex];
            },
          },
        },
      ],
    };
    typeChart.setOption(typeOption);
  }
});
</script>
<style scoped>
.ant-dropdown-trigger {
  cursor: pointer;
}
</style>
